<template>
  <div style="width: 100%">
    <div style="width: 100%; height: 40px; background: #fff">
      <div style="float: right; padding: 4px 20px">
        {{ l('TimeRange') }}:
        <a-range-picker v-model:value="rangePicker" @change="panelChange" />
      </div>
    </div>
    <!-- 宿主工作台 -->
    <host-dashboard
      v-if="role == 'host'"
      :startTime="startTime"
      :endTime="endTime"
      :rangePicker="rangePicker"
    ></host-dashboard>
    <!-- 租户工作台 -->
    <tenant-dashboard
      v-else-if="role == 'tenant'"
      :startTime="startTime"
      :endTime="endTime"
      :rangePicker="rangePicker"
    ></tenant-dashboard>
    <!-- 用户工作台 -->
    <user-dashboard v-else-if="role == 'user'"></user-dashboard>
  </div>
</template>

<script lang="ts">
  import { AppComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import HostDashboard from './host-dashboard/host-dashboard.vue';
  import TenantDashboard from './tenant-dashboard/tenant-dashboard.vue';
  import UserDashboard from './user-dashboard/user-dashboard.vue';
  import moment from 'moment';
  import dayjs from 'dayjs';

  export default defineComponent({
    name: 'dashboard',
    mixins: [AppComponentBase],
    components: {
      HostDashboard,
      TenantDashboard,
      UserDashboard,
    },
    data() {
      return {
        startTime: '',
        endTime: '',
        role: '',
        rangePicker: [],
      };
    },
    created() {
      // 权限判断
      if (this.isGranted('Pages.Administration.Host.Dashboard')) {
        this.role = 'host';
      } else if (this.isGranted('Pages.Tenant.Dashboard')) {
        this.role = 'tenant';
      } else {
        this.role = 'user';
      }

      // 时间调整
      this.endTime = moment(new Date().toLocaleDateString()).format('YYYY/MM/DD');
      this.startTime = moment(new Date()).subtract(7, 'days').format('YYYY/MM/DD');
      this.rangePicker = [
        dayjs(this.startTime, 'YYYY/MM/DD'),
        dayjs(this.endTime, 'YYYY/MM/DD'),
      ] as any;
    },
    methods: {
      panelChange(date, dateString) {
        this.startTime = dateString[0].replaceAll('-', '/');
        this.endTime = dateString[1].replaceAll('-', '/');
      },
    },
  });
</script>

<style lang="less" scoped>
  @import './dashboard.less';
</style>
